<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jq/jquery.js"></script>
</head>
<body>
    <input type="button" value="sendAjax" onclick="sendAjax1()">
    <input type="button" value="sendAjax" onclick="sendAjax2()">
    <script>    

        // + CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）。

        // + 它允许浏览器向跨源服务器，发出 `XMLHttpRequest（AJAX）`请求，从而克服了AJAX只能同源使用的限制。

        // + 但 CORS 需要浏览器和服务器同时支持，因此存在浏览器兼容问题

        // + 整个CORS通信过程，都是浏览器自动完成，不需要用户参与。

        // + 浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息。

        // + 因此实现CORS通信的关键是服务器，只要服务器实现了CORS接口，就可以跨源通信。

        //     > 1、客户端：浏览器会自动在请求头中添加一个Origin字段
        //     >
        //     > 2、服务端：设置响应头Access-Control-Allow-Origin ，允许指定域名的跨源请求
        function sendAjax1(){
            let xhr=new XMLHttpRequest();
            xhr.open("get","http://127.0.0.1:3000/cors/test1");
            xhr.onload=function(){
                console.log(xhr.responseText);
            };
            xhr.send();
        }

        function sendAjax2(){
            $.ajax({
                url:"http://127.0.0.1:3000/cors/test1",
                success:function(data){
                    console.log(data);
                }
            });
        }
    </script>
</body>
</html>